<template>
	<view>
		<view v-if="compData" class="shared_content" v-for="item,index in compData">
			<!-- 广告 -->
			<block v-if="item.dsp">
				<!-- 头像 -->
				<view class="con_top">
					<image class="img" :src="`${item.dsp.user.user_photo}`" mode="scaleToFill"></image>
					<text class="top_txt">
						{{item.dsp.user.nick}}
					</text>
				</view>
				<!-- 大图 -->

				<image class="img_2" :src="`${item.dsp.ximage}`" mode="widthFix"></image>

				<!-- 标题 -->
				<view class="cap_text_1">
					{{item.dsp.t}}
				</view>
				<view class="cap_text_2">
					{{item.dsp.d}}
				</view>
			</block>
			<!-- 数据一 -->
			<block v-if="item.r">
				<!-- 头像 -->
				<view class="con_top">
					<image class="img" :src="`${item.r.a.p}`"></image>
					<text class="top_txt">
						{{ item.r.a.n}}
					</text>
				</view>
				<!-- 大图 -->
				<!-- :style="`width:${item.r.pw}rpx;height:${item.r.ph}rpx;`" -->
				<!-- :style="`height:${item.r.pw >600?'600':'item.r.pw'}rpx;`"  -->
				<image class="img_2" @tap="menuClick(item)" :src="`${item.r.img}`" mode="aspectFill"></image>
				<!-- 遮罩层 -->
				<view class="mask_img" v-if="item.r.vfurl">
					<uni-icons type="videocam" size="20" color="rgb(240,240,240)"></uni-icons>
				</view>
				<!-- 收藏 -->
				<view class="con_collect">
					<view class="collect_img" v-if="item.r.collect_users">
						<block v-for="e,i in item.r.collect_users">
							<image class="collect_img_item" :src="`${e.p}`"></image>
						</block>
					</view>

					<view class="collect_num" v-if="item.r.collect_count_text">{{item.r.collect_count_text}}</view>
					<view class="collect_num" v-else>{{item.r.vc}}人浏览</view>
					<!-- 收藏 ICONFONT-->
					<view class="collect_icon">
						<uni-icons type="star" size="30"></uni-icons>
					</view>

				</view>
				<!-- 标题 -->
				<view class="con_bottom">
					{{item.r.n}}
				</view>
			</block>
			<!-- 数据二 -->
			<block v-if="item.note">
				<!-- 头像 -->
				<view class="con_top">
					<image class="img" :src="`${item.note.author.p}`"></image>
					<text class="top_txt">
						{{ item.note.author.n}}
					</text>
				</view>
				<!-- 大图 -->
				<!-- :style="`width:${item.note.image_w}rpx;height:${item.note.image_h}rpx;`" -->
				<!-- :style="`height:${item.note.image_h >800?'600':'item.note.image_h'}rpx;`" -->
				<image class="img_2" :src="`${item.note.image_u_webp}`" mode="aspectFill"></image>
				<!-- 收藏 -->
				<view class="con_collect">

					<view class="collect_num" v-if="item.note.like_count">{{item.note.like_count}}人喜欢</view>
					<view class="collect_num" v-else>
						<uni-icons type="eye" size="20"></uni-icons>
						{{item.note.favo_count}}人浏览
					</view>
					<!-- 收藏 ICONFONT-->
					<view class="collect_icon">
						<uni-icons type="star" size="30"></uni-icons>
					</view>
				</view>
				<!-- 标题 -->
				<view class="con_bottom">
					{{item.note.title}}
				</view>
			</block>
		</view>
		<!--  -->
		<!-- <view id="footer" class="footer"></view> -->
	</view>
</template>

<script>
	export default {
		name: "compShared",
		props: ["compData"],
		data() {
			return {
offset:0
			};
		},
		mounted(){
			// let io = new IntersectionObserver(this.loadList, {});
			// let viewList = document.getElementById('footer');
			// io.observe(viewList);
		},
		methods: {
			menuClick(k) {
				if (k.r) {
					console.log('菜谱详情', k.r.id);
					uni.navigateTo({
						url: `/pages/childPage/menuDetail/menuDetail?value=${k.r.id}`
					})
				} else {
					console.log('笔记详情', k.note.id);
					uni.navigateTo({
						url: `/pages/childPage/noteDetail/noteDetail?id=${k.note.id}`
					})
				}

			},
			touchList(k) {
				console.log(k)
				// if (this.status == false) {
				k = k[0];
				let isShow = k.isIntersecting;
				if (isShow) {
					let tempIndex = ++this.offset;
					console.log('this.page ++', tempIndex);
					// this.getData(tempIndex)
				}
				// }
			
			}
		},
		created() {
			console.log(this.compData)
		}
	}
</script>

<style lang="scss">
	.shared_content {
		width: 100%;
		position: relative;
		// margin-top: 200rpx;

		// top 
		.con_top {
			width: 92%;
			margin: 0 auto;
			display: flex;
			// justify-content: ;
			align-items: center;
			padding: 20rpx 0;

			.img {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.top_txt {
				font-size: 20rpx;
				text-indent: 20rpx;
				font-weight: 600;
			}
		}

		// 大图
		.img_2 {
			width: 100%;

			img {
				width: 100%;
				// height: 480rpx;
			}
		}

		// 遮罩层
		.mask_img {
			padding: 10rpx;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .3);
			position: absolute;
			// bottom: 0;
			right: 40rpx;
			top: 490rpx;
			// left: 0;
			// margin: auto;
		}

		//收藏
		.con_collect {
			width: 92%;
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;

			// 列表项 图
			.collect_img {
				display: flex;
				// justify-content: space-between;
				align-items: center;

				.collect_img_item {
					width: 38rpx;
					height: 38rpx;
					border-radius: 50%;
				}
			}

			// num
			.collect_num {
				width: 60%;
				font-size: 20rpx;
			}

			.collect_icon {}
		}

		// 标题 con_bottom
		.con_bottom {
			width: 92%;
			margin: 0 auto;
			padding: 20rpx 0;
		}

		.cap_text_1 {
			width: 92%;
			margin: 0 auto;
			padding: 10rpx 0 0;
			// font-size: 24rpx;
			// color: #666;
		}

		.cap_text_2 {
			width: 92%;
			margin: 0 auto;
			padding: 10rpx 0;
			font-size: 24rpx;
			color: #666;
		}
	}
</style>
